<template>
  <!-- 雨情日报表 -->
  <div id="base">
    <!-- 搜索 -->
    <div class="search">
      <div class="searchTop">
        <el-form :inline="true" :model="search">
          <el-form-item label="日期选择">
            <el-date-picker
              v-model="search.time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAddBook">查询</el-button>
            <el-button @click="empty" type="info">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="searchBot">
        <!-- <el-button style="width:96px" class="buttonBot" type="primary" @click="notice">新增</el-button> -->
        <!-- icon="el-icon-plus" -->
        <!-- <el-button icon="el-icon-upload2" class="buttonBotLast" @click="excellist">导出数据</el-button> -->
      </div>
    </div>
    <div id="ehart1" ref="ehart1" :style="{width: '100%', height: '500px'}"></div>
    <!-- 列表 -->
    <!-- <div id="table">
      <el-table
        :data="
          data.list.slice(
            (data.currpage - 1) * data.pagesize,
            data.currpage * data.pagesize
          )
        "
        stripe
        style="width: 100%"
        :header-cell-style="{ background: 'rgba(237, 242, 246, 1)' }"
      >
        <el-table-column :index="table_index" fixed type="index" label="序号"></el-table-column>
        <el-table-column prop="deviceName" fixed label="测站名称" width="80px"></el-table-column>
        <el-table-column
          v-for="(item, index) in 16"
          :key="index+'8/16'"
          :prop="(index + 8).toString()"
          :label="index + 8 + '时'"
          width="60px"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in 8"
          :key="index+'0/7'"
          :prop="(index ).toString()"
          :label="index+ '时'"
          width="60px"
        ></el-table-column>
        <el-table-column fixed="right" prop="dayTotal" label="合计"></el-table-column>
      </el-table>
    </div>-->
    <!-- 分页 -->
    <!-- <div class="pagination">
      <el-pagination
        :current-page="data.currpage"
        :page-size="data.pagesize"
        :page-sizes="[15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.list.length"
        @prev-click="nextpage"
        @next-click="nextpage"
        @current-change="nextpage"
        @size-change="sizeChange"
      ></el-pagination>
    </div>-->
  </div>
</template>
<script>
import { getTimeSeconds } from "../../utils/myMethod";
export default {
  data() {
    return {
      search: {
        time: getTimeSeconds(new Date())
      },
      data: {
        pagesize: 15,
        currpage: 1,
        list: []
      },
      dataMsgs: {},
      service: [],
      dataX: [],
      dataY: []
    };
  },
  created() {
    let that = this;
    let time = that.search.time;
    let dataMsgs = {
      msgs: [],
      names: []
    };
    that.$http
      .post("rainDevice/getReportFrom", {
        time,
        dateType: "day",
        companyId: localStorage.getItem("companyId")
      })
      .then(res => {
        res.data.forEach(data => {
          let msg = {
            codes: [],
            times: [],
            levels: [],
            name: ""
          };
          msg.name = data.name;
          dataMsgs.names.push(data.name);
          for (let i = 0; i < data.dataMsgs.length; i++) {
            if (data.dataMsgs[i] != undefined) {
              msg.codes.push(data.dataMsgs[i].code);
              msg.times.push(data.dataMsgs[i].createTime);
              msg.levels.push(data.dataMsgs[i].waterLevel);
              if (i == data.dataMsgs.length - 1) {
                dataMsgs.msgs.push(msg);
              }
            }
          }
        });
        let ser = {};
        for (let i = 0; i < dataMsgs.msgs.length; i++) {
          if (i == 0) {
            ser = {
              name: dataMsgs.msgs[i].name,
              type: "line",
              stack: "总量",
              smooth: true,
              itemStyle: {
                normal: {
                  label: {
                    show: false, //开启显示
                    position: "top", //在上方显示
                    textStyle: {
                      //数值样式
                      color: "blue",
                      fontSize: 14
                    }
                  }
                }
              },
              data: dataMsgs.msgs[i].waterLevel
            };
          } else {
            ser = {
              name: dataMsgs.msgs[i].name,
              type: "line",
              stack: "总量",
              data: dataMsgs.msgs[i].waterLevel
            };
          }
          that.service.push(ser);
        }
        that.dataMsgs = dataMsgs;
        console.log(that.dataMsgs);
      });
    // this.getList().then(res => {
    //   this.drawLine(res);
    // });
  },
  methods: {
    table_index(index) {
      return (this.data.currpage - 1) * this.data.pagesize + (index + 1);
    },
    drawLine(data) {
      let myChart = this.$Echarts.init(document.getElementById("ehart1"));
      let option = {
        title: {
          text: "水位日报表（单位:CM）"
        },
        tooltip: {
          trigger: "item",
          // trigger: "axis",
          position: "bottom",
          textStyle: {
            align: "left"
          },
          formatter: function(params) {
            console.log(params);
            var res = "<div><p>" + params.seriesName + "</p></div>";
            // for(var i=0;i<params.length;i++){
            // res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
            // }
            res += "<p>当前水位:" + params.data + "CM</p>";
            res += "<p>更新时间:" + "2020-05-27 12:00:00" + "</p>";
            return res;

            // seriesType: "line"
            // seriesIndex: 0
            // seriesId: "广利河西五路0"
            // seriesName: "广利河西五路"
            // name: 5
            // dataIndex: 5
            // data: 630
            // dataType: undefined
            // value: 630
            // color: "#c23531"
            // borderColor: undefined
            // console.log(params.seriesName)
          }
        },
        legend: {
          x: "300px",
          y: "-5px",
          data: that.dataMsgs.names
          // selected: {
          //   广利河北二路: false,
          //   广利河黄河路: false,
          //   东营河庐山路: false,
          //   五六干合排西五路: false,
          //   五六干合排西四路: false,
          //   六干排西四路: false,
          //   六干排庐山路: false,
          //   老广蒲沟西五路: false,
          //   老广蒲沟西二路: false,
          //   老广蒲沟南一路: false,
          //   五干排西五路: false,
          //   五干排西二路: false,
          //   五干排南二路: false
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        //保持图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value",
          axisLabel: {
            // color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: that.service
      };
      myChart.setOption(option);
    },
    //获取列表数据
    getList() {
      let _this = this;
      let time = _this.search.time;
      console.log(time);
      return new Promise(function(resolve, reject) {
        _this.$http
          .post("rainDevice/getReportFrom", {
            time,
            dateType: "day",
            companyId: localStorage.getItem("companyId")
          })
          .then(res => {
            _this.data.currpage = 1;
            _this.data.list = res.data;
            console.log("6666", res.data);
            let dataX = [];
            let dataY = [];
            // res.data.forEach(element => {
            //   dataX.push(element.deviceName);
            //   dataY.push(element.dayTotal);
            // });
            let totalArr = res.data.filter(v => {
              return v.deviceName === "合计量";
            });

            let dataed = Object.values(totalArr[0]).slice(0, 24);
            let dataedStart = dataed.slice(0, 8);
            let dataedEnd = dataed.slice(8, 24);
            let dataList = [...dataedEnd, ...dataedStart];
            // console.log("xxxx1",dataed)
            // console.log("xxxx2",dataedStart)
            // console.log("xxxx3",dataedEnd)
            // console.log("xxxx4",dataList)

            // _this.dataX = dataX;
            _this.dataY = dataList;

            // ;
            resolve(dataList);
          });
      });
    },
    //查询
    getAddBook() {
      this.getList().then(res => {
        this.drawLine(res);
      });
    },
    //清空

    empty() {
      this.search = {
        time: getTimeSeconds(new Date())
      };
      this.getList().then(res => {
        this.drawLine(res);
      });
    },
    // 翻页
    nextpage(value) {
      this.data.currpage = value;
    },
    // 显示条数切换
    sizeChange(total) {
      this.data.pagesize = total;
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.tableButton3 {
  color: #fff;
  background-color: #f56c6c;
  border-radius: 3px;
}
.textmsg {
  color: red;
}
.textcc {
  color: #000;
}
.paginationList {
  text-align: center;
  margin-top: 32px;
  padding: 0;
}
.table {
  width: 1128px;
  height: 465px;
  margin-top: 16px;
}
.dialogText {
  .el-input {
    width: 240px;
    height: 32px;
  }
  .selectTop {
    width: 240px;
    height: 32px;
  }
  .selectBot {
    width: 240px;
    height: 32px;
  }
}
.formButon {
  width: 127px;
  height: 40px;
  text-align: center;
}

.pagination {
  text-align: center;
  margin-right: 25px;
  padding-top: 20px;
}
.green {
  color: green;
}
.red {
  color: red;
}
#ehart1 {
  margin-top: 22px;
  width: 886px;
  height: 252px;
}
</style>
